<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>赛博朋克数据中心</title>
    <style>
        body {
            font-family: "Courier New", monospace;
            margin: 0;
            padding: 20px;
            background-color: #0a0a0a;
            color: #0f0;
        }

        /* 标题区域 */
        .title-box {
            text-align: center;
            padding: 30px;
            border: 5px solid #0f0;
            margin-bottom: 40px;
            position: relative;
            overflow: hidden;
        }




        .data-card {
            width: 300px;
            margin: 0 auto 20px;
            padding: 5px;
            border: 3px solid #0f0;
            background-color: #1a1a1a;
            transition: all 0.3s;
        }

        .data-card .line {
            border: 3px solid rgba(0, 255, 255, 0);
            padding: 5px;
        }

        .data-card:hover {
            transform: scale(1.03);
        }

        .data-card:hover .line {
            border-color: rgb(0, 255, 255);
        }



        .data-title {
            font-size: 24px;
            text-align: center;
            margin-bottom: 15px;
            border-bottom: 2px dashed #0f0;
            padding-bottom: 10px;
        }

        .data-item {
            margin: 10px 0;
            padding: 10px;
            background-color: #2a2a2a;
            border-left: 5px solid #0ff;
            text-align: left;
        }
    </style>
</head>

<body>
    <!-- 标题区域 -->
    <div class="title-box">
        <h1>数据中心</h1>
    </div>

    <!-- 数据卡片区域 -->
    <div class="data-container">
        <div class="data-card">
            <div class="line">
                <div class="data-title">系统状态</div>
                <div class="data-item">CPU占用：<span style="color: #0ff">85%</span></div>
                <div class="data-item">内存使用：<span style="color: #0ff">72%</span></div>
                <div class="data-item">网络连接：<span style="color: #0f0">稳定</span></div>
            </div>
        </div>

        <div class="data-card">
            <div class="line">
                <div class="data-title">安全监控</div>
                <div class="data-item">入侵尝试：<span style="color: #f00">3次</span></div>
                <div class="data-item">防火墙状态：<span style="color: #0f0">激活</span></div>
                <div class="data-item">数据加密：<span style="color: #0ff">100%</span></div>
            </div>
        </div>
    </div>
</body>

</html>